<template>
  <div class="container-item-menu">
    <div class="item">
      <div>我们能为你做什么</div>
      <div>BUSINESS</div>
    </div>
    <div class="itemList">

      <div class="menuList" @click="routerLink('video')">
        <div class="menuPic">
          <div class="name">
            <div>CREATIV</div>
            <div>VIDEO</div>
          </div>
          <div class="iconfont icon-shipin"></div>
        </div>
        <div class="menuBtn">
          <div>创意视频</div>
          <div class="menuSign">
            <div class="iconfont icon-tuxing"></div>
          </div>
        </div>
      </div>

      <div class="menuList" @click="routerLink('interact')">
        <div class="menuPic">
          <div class="name">
            <div> INTARATION</div>
            <div>HTML</div>
          </div>
          <div class="iconfont icon-icon--"></div>
        </div>
        <div class="menuBtn">
          <div>互动H5</div>
          <div class="menuSign">
            <div class="iconfont icon-tuxing "></div>
          </div>
        </div>
      </div>

      <div class="menuList" @click="routerLink('poster')">
        <div class="menuPic">
          <div class="name">
            <div> CREATIVE</div>
            <div>POSTER </div>
          </div>
          <div class="iconfont icon-tupian"></div>
        </div>
        <div class="menuBtn">
          <div>创意海报</div>
          <div class="menuSign">
            <div class="iconfont icon-tuxing "></div>
          </div>
        </div>
      </div>

      <div class="menuList" @click="routerLink('longPic')">
        <div class="menuPic">
          <div class="name">
            <div> COMIC</div>
            <div>LONG GRAPH</div>
          </div>
          <div class="iconfont icon-dongman"></div>
        </div>
        <div class="menuBtn">
          <div>动漫长图</div>
          <div class="menuSign">
            <div class="iconfont icon-tuxing "></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  methods: {
    routerLink(name) {
      this.$router.push({ name });
    }
  }
};
</script>

<style lang="less">
.container-item-menu {
  width: 1200px;
}
.item {
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  padding: 20px 0;
  color: #606060;
}
.itemList {
  width: 100%;
  height: 440px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid #e44f50;
  padding-bottom: 45px;
  .menuList {
    width: 270px;
    height: 340px;
    padding: 5px;
    position: relative;
    overflow: hidden;
    &::after{
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      position: absolute;
      top: -10px;
      right: -10px;
      z-index: 0;
      border-radius: 50%;
      background: #e44f50;
      transition: all .8s
    }
    .icon-tuxing {
      transform: translateX(-100px);
    }
    &:hover{
      height: 440px;
      *{
        transition: 1s;
        color: #fff !important;
      }
      .icon-tuxing {
        transform: translateX(0)
      }
      &::after{
        transform: scale(120,120)
      }
    }
    .menuPic {
      height: 318px;
      width: 100%;
      overflow: hidden;
      position: relative;
      z-index: 3;
      color: #606060;
      padding: 45px 15px;
      box-sizing: border-box;
      .name {
        font-size: 32px;
        padding-bottom: 25px;
      }
    }
    .menuBtn {
      display: flex;
      position: relative;
      z-index: 3;
      justify-content: space-between;
      padding-top: 80px;
      align-items: center;
      padding: 80px 20px 0;
      .menuSign {
        padding: 0px 30px;
        border-radius: 5px;
        border: 1px solid;
        box-sizing: border-box;
        overflow: hidden;
        .iconfont {
          font-size: 30px !important;
        }
      }
    }
  }
  .iconfont {
    font-size: 67px !important;
    color: #606060;
  }
}
</style>